<template>
  <div class="login">
    <img :src="require('../../static/BG.png')" alt="">
    <LoginHeader>
      <el-form
      :rules="rules"
      :model="ruleForm"
      ref="ruleForm"
      label-position="left"
      label-width="0px"
      slot="container"
      >
        <div class="title">
          <h3>账号密码登录</h3>
        </div>
        <!-- username -->
        <el-form-item prop="username">
          <el-input type="text" v-model="ruleForm.username" auto-complete="off"  placeholder="账号">
            <i slot="prefix" class="fa fa-user-o"></i>
          </el-input>
        </el-form-item>

        <!-- password -->
        <el-form-item prop="password">
          <el-input type="password" v-model="ruleForm.password" @keyup.enter.native="handleSubmit"  @paste.native.capture.prevent="handlePaste"  auto-complete="off" placeholder="密码">
            <i slot="prefix" class="fa fa-lock"></i>
          </el-input>
        </el-form-item>

      <!-- <el-form-item prop="captcha">
          <el-input style="width: 200px" type="text" @keyup.enter.native="handleSubmit" v-model="ruleForm.captcha" auto-complete="off" placeholder="请输入验证">
          </el-input>
          <img style="float: right;" id="captcha" width="120px" height="37px" src="/manage/common/verify" alt="captcha" onclick="this.src='/manage/common/verify?'+Math.random();">
        </el-form-item>-->

        <!-- 登录button -->
        <el-form-item>
          <el-button
            :loading="isLogin"
            @click.native.prevent="handleSubmit"
            type="primary"
            style="width:100%;"
          >登录</el-button>
        </el-form-item>

        <!-- 7天登录和忘记密码 -->
        <!-- <el-form-item>
          <el-checkbox v-model="ruleForm.autoLogin" :checked="ruleForm.autoLogin">7天内自动登录</el-checkbox>
          <el-button @click="$router.push('/password')" type="text" class="forget">忘记密码？</el-button>
        </el-form-item> -->
      </el-form>
    </LoginHeader>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import LoginHeader from "./LoginHeader.vue";

@Component({
  components: { LoginHeader }
})
export default class Login extends Vue {
  // 存储用户信息
  @Action("setUser") setUser: any;

  @Provide() isLogin: boolean = false;
  // @Provide() asideData: any = [];//侧边栏数据
  @Provide() ruleForm: {
    username: String;
    password: String;
    // captcha: String;
  } = {
    username: "",
    password: "",
    // captcha: ""
  };

  @Provide() rules = {
    username: [{ required: true, message: "请输入账号", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    // captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }]
  };
  created() {
    // console.log('created');
  }

  //在vue函数中
  handlePaste(e){
    console.log(e);
    //粘贴会触发来到这里,无操作就行
  }
  handleSubmit(): void {
    (this.$refs["ruleForm"] as any).validate((valid: boolean) => {
      if (valid) {
        this.isLogin = true;
        (this as any).$axios
          .post(
                  "/manage/admins/verifyLogin",
                  this.ruleForm,
          )
          .then((res: any) => {
            this.isLogin = false;
            if(res.data.status){
              // 存储token
              localStorage.setItem("tsToken", res.data.data.token);
              // 存储用户名
              localStorage.setItem("username", res.data.data.manage.name);
              //存储侧边栏数据
              localStorage.setItem("asideData", JSON.stringify(res.data.data.menu));
              // 存储管理员信息
              localStorage.setItem("manage", JSON.stringify(res.data.data.manage));
              // 登录成功 跳转 /
              this.$router.push("/");
            }else{
              this.$message({
                message: res.data.msg,
                type: "error"
              });
            }
          })
          .catch(() => {
            this.isLogin = false;
          });
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.login >img {
  width: 100%;
  height: 100%;
}
.title {
  margin: 20px auto 40px auto;
  text-align: center;
  // color: #505458;
  font-size: 26px;
  color: #1F4881;
  // margin-bottom: 40px;
}

i {
  font-size: 14px;
  margin-left: 8px;
}
.forget {
  float: right;
}
.el-form-item {
  margin-bottom: 30px;
}
</style>

